<!--
 * @Description: 套餐管理
 * @FilePath: \hk-computerRoom-Security\src\views\system\package\index.vue
 * @Date: 2024-01-03 16:30:40
 * @LastEditTime: 2024-01-05 17:51:50
-->
<template>
	<div class="system-user-container layout-padding">
		<div class="layout-padding-auto layout-pd card-bg energy-table current-page">
			<div class="system-user-search mb15 energy-from">
				<el-form size="default">
					<el-row :gutter="20">
						<el-col :xs="24" :sm="12" :md="8" :lg="3" :xl="3" class="mb20">
							<el-form-item>
								<el-input v-model="state.formData.name" placeholder="请输入套餐名称" style="width: 100%" clearable> </el-input>
							</el-form-item>
						</el-col>

						<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="mb20">
							<el-form-item>
								<div class="btn2" @click="getPackageList">
									<el-icon> <ele-Search /> </el-icon><span class="ml6">查询</span>
								</div>
								<div class="btn3 ml10" @click="refreshData">
									<el-icon> <ele-Refresh /> </el-icon><span class="ml6">重置</span>
								</div>
								<div class="btn1 ml10" @click="onOpenAddUser('', 'isAdd')">
									<el-icon> <ele-CirclePlus /> </el-icon><span class="ml6">新增</span>
								</div>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>

			<el-table
				:data="state.tableData.data"
				v-loading="state.tableData.loading"
				style="width: 100%"
				:cell-style="{ textAlign: 'center' }"
				:row-style="{ background: '#0F2C6A' }"
				:header-cell-style="{ background: '#1E4897', color: '#499AFD', textAlign: 'center' }"
			>
				<el-table-column align="center" type="index" label="序号" width="80" />

				<el-table-column align="center" prop="name" label="套餐名称" />
				<el-table-column align="center" prop="status" label="状态" width="100">
					<template #default="scope">
						<el-switch
							v-model="scope.row.status"
							size="default"
							:active-value="0"
							:inactive-value="1"
							active-text="启用"
							inactive-text="禁用"
							inline-prompt
							style="--el-switch-on-color: #13ce66"
							@change="changeStatus(scope.row)"
						>
						</el-switch>
					</template>
				</el-table-column>
				<el-table-column align="center" prop="createTime" label="创建时间" />
				<el-table-column align="center" prop="remark" label="备注" />
				<el-table-column align="center" label="操作" fixed="right" width="200">
					<template #default="scope">
						<el-button size="small" link type="success" @click="onOpenAddUser(scope.row, 'isDetail')">详情</el-button>
						<el-button size="small" link type="success" @click="onOpenAddUser(scope.row, 'isEdit')">修改</el-button>
						<!-- <el-button size="small" link type="danger" @click="onRowDel(scope.row)">删除</el-button> -->
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				@size-change="onHandleSizeChange"
				@current-change="onHandleCurrentChange"
				class="mt15"
				:pager-count="5"
				:page-sizes="[1, 5, 10, 15]"
				v-model:current-page="state.tableData.param.pageNum"
				background
				v-model:page-size="state.tableData.param.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="state.tableData.total"
			>
			</el-pagination>
		</div>
		<AddDialog ref="addDialogRef" @refresh="getPackageList()" />
	</div>
</template>
<script setup lang="ts" name="package">
import { reactive, onMounted, ref, defineAsyncComponent } from 'vue';
import { ElMessageBox, ElNotification } from 'element-plus';
import { usePackageApi } from '/@/api/system/package/index';

const AddDialog = defineAsyncComponent(() => import('./addDialog.vue'));

// 定义变量内容
const addDialogRef = ref();

const state: any = reactive({
	// options: [
	// 	{ label: '正常', value: 0 },
	// 	{ label: '停用', value: 1 },
	// ],
	formData: {
		name: '', // 套餐名
	},
	tableData: {
		data: [],
		total: 0,
		loading: false,
		param: {
			pageNum: 1,
			pageSize: 10,
		},
	},
});

// 分页查询所有套餐包信息
const getPackageList = async () => {
	state.tableData.loading = true;
	const { data } = await usePackageApi().pageModulePackage({
		...state.formData,
		...state.tableData.param,
	});
	state.tableData.data = data.records;
	state.tableData.total = data.total;
	setTimeout(() => {
		state.tableData.loading = false;
	}, 200);
};

/**
 * @name: 打开新增/编辑弹窗
 * @param {*} row 行数据
 * @param {*} type 弹框类型 isAdd/isEdit/isDetail
 * @return {*}
 */
const onOpenAddUser = (row: any, type: string) => {
	addDialogRef.value.openDialog(row, type);
};

// 修改状态
const changeStatus = async (row: any) => {
	const data = await usePackageApi().enablePackage({
		id: row.id,
		status: row.status,
		remark: row.remark,
	});
	if (data.code == 200) {
		ElNotification({
			title: '提示',
			message: '套餐状态切换成功',
			position: 'top-right',
			type: 'success',
		});
		getPackageList();
	}
};

// 删除
// const onRowDel = (row: any) => {
// 	ElMessageBox.confirm(`此操作将永久删除套餐：“${row.name}”，是否继续?`, '提示', {
// 		confirmButtonText: '确认',
// 		cancelButtonText: '取消',
// 		type: 'warning',
// 	})
// 		.then(async () => {
// 			// const data = await usePackageApi().delPostById(row.id);
// 			// if (data.code == 200) {
// 			// 	ElNotification({
// 			// 		title: '提示',
// 			// 		message: '删除套餐成功',
// 			// 		position: 'top-right',
// 			// 		type: 'success',
// 			// 	});
// 			// 	getPackageList();
// 			// }
// 		})
// 		.catch(() => {});
// };

// 重置
const refreshData = () => {
	state.formData = {
		name: '', // 岗位名称
		// state: '', // 岗位状态
	};

	getPackageList();
};

// 分页改变
const onHandleSizeChange = (val: number) => {
	state.tableData.param.pageSize = val;
	getPackageList();
};

// 分页改变
const onHandleCurrentChange = (val: number) => {
	state.tableData.param.pageNum = val;
	getPackageList();
};

// 页面加载时
onMounted(() => {
	getPackageList();
});
</script>
<style scoped lang="scss">
.system-user-container {
	:deep(.el-card__body) {
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: auto;

		.el-table {
			flex: 1;
		}
	}
}
</style>
